<template>
    <div class="content">
        <img src="http://city-card.oss-cn-hangzhou.aliyuncs.com/epidemic-situation/es-header.png"
             class="hd-img-responsive"/>
        <van-row type="flex" justify="center" class="select-div">
            <van-col span="8" class="select-item">
                辽宁省
            </van-col>
            <van-col span="8" class="select-item">
                沈阳市
            </van-col>
            <van-col span="8">
                <van-dropdown-menu>
                    <van-dropdown-item v-model="qu" :options="areaList" @change="dianji()"/>
                </van-dropdown-menu>
            </van-col>
        </van-row>
        <div v-for="item2 in xinlist " :key="item2.id">
            <div class="content-div">
                <div class="title">{{item2.quyu}}（{{item2.data.length?item2.data.length:0}}个确诊地点）</div>
                <van-grid :column-num="3">
                    <van-grid-item text="确诊地点" class="content-bottom"/>
                    <van-grid-item text="确诊人数" class="content-bottom"/>
                    <van-grid-item text="与我距离" class="content-bottom"/>
                </van-grid>
                <div v-for="item3 in item2.data" :key="item3.id">
                    <van-grid :column-num="3">
                        <van-grid-item :text="item3.addres"></van-grid-item>
                        <van-grid-item :text="item3.num"></van-grid-item>
                        <van-grid-item :text="item3.juli"></van-grid-item>
                    </van-grid>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getconfirmedList, getcountList } from '@/api/etc/etc-service-handle'
// import { Dialog } from 'vant'
import VConsole from 'vconsole'

export default {
  data () {
    return {
      jingdu2: '',
      weidu2: '',
      jingdu: '',
      weidu: '',
      xinlist: [],
      list2: [],
      countnum: '',
      list: [],
      qu: '',
      areaList: [
        {
          text: '全部',
          value: ''
        },
        {
          text: '大东区',
          value: '大东区'
        },
        {
          text: '沈河区',
          value: '沈河区'
        },
        {
          text: '和平区',
          value: '和平区'
        },
        {
          text: '皇姑区',
          value: '皇姑区'
        },
        {
          text: '沈北新区',
          value: '沈北新区'
        },
        {
          text: '浑南区',
          value: '浑南区'
        },
        {
          text: '铁西区',
          value: '铁西区'
        },
        {
          text: '辽中县',
          value: '辽中县'
        },
        {
          text: '法库县',
          value: '法库县'
        }

      ]
    }
  },
  methods: {
    firstList (newlongitude, newlatitude) {
      let data = { quyu: this.qu }
      getconfirmedList(data).then(ret => {
        this.list = ret.data.data
        console.log('---', this.list)
        for (var i = 0; i < this.list.length; i++) {
          let radLat1 = newlatitude * Math.PI / 180.0
          let radLat2 = this.list[i].latitude * Math.PI / 180.0
          let a = radLat1 - radLat2
          let b = newlongitude * Math.PI / 180.0 - this.list[i].longitude * Math.PI / 180.0
          let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
                Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)))
          s = s * 6378.137// EARTH_RADIUS;
          console.log(s)
          let distance = s
          let distance_str = ''

          if (parseInt(distance) >= 1) {
            distance_str = distance.toFixed(1) + 'km'
          } else {
            distance_str = (distance * 1000).toFixed(1) + 'm'
          }
          this.list[i].juli = distance_str
        }
        this.aa()
      })
    },
    chaxunnum () {
      let data = { quyu: this.qu }
      getcountList(data).then(ret => {
        this.list2 = ret.data.data
      })
    },
    dianji () {
      this.firstList(this.jingdu, this.weidu)
    },
    aa () {
      var map = {}
      var dest = []// 新的json数组
      let arr = this.list
      for (var i = 0; i < arr.length; i++) {
        var ai = arr[i]
        if (!map[ai.quyu]) {
          dest.push({
            quyu: ai.quyu,
            data: [ai]
          })
          map[ai.quyu] = ai
        } else { // 放到对应的id下面
          for (var j = 0; j < dest.length; j++) {
            var dj = dest[j]
            if (dj.quyu === ai.quyu) {
              dj.data.push(ai)
              break
            }
          }
        }
      }
      console.log(dest)
      this.xinlist = dest
    },
    getLocation () {
      // let isSuccess = false// 获取位置成功还是失败
      let longitude = ''
      let latitude = ''
      let _this = this
      // if (!isSuccess) {
      this.$common.getLocation(function (option) {
        if (option.errMsg === 'getLocation:ok') {
          console.log(option)
          let newlongitude = option.longitude
          let newlatitude = option.latitude
          _this.jingdu = option.longitude
          _this.weidu = option.latitude
          _this.firstList(newlongitude, newlatitude)
        } else {
          this.$dialog.alert({
            message: '获取位置失败 默认位置沈阳站'
          }).then(() => {
            longitude = 123.393368
            latitude = 41.794601
            _this.firstList(longitude, latitude)
          })
        }
      }, this.debug)
    },
    rad (d) {
      return d * Math.PI / 180.0
    }
  },
  mounted () {
    this.getLocation()
    if (this.$route.query.debug === 'debug') {
      let a = new VConsole()
      console.log(a)
      this.debug = true
    }
  }
}
</script>

<style scoped>
    .content {
        background-color: #efefef;
    }

    .select-div {
        background: #ffffff;
        width: 100%;
        padding: 10px 0 10px 0;
    }

    .select-item {
        text-align: center;
        line-height: 25px;
        font-size: 12px;
        border-right: 1px solid #dddddd;
    }

    .content >>> .van-dropdown-menu {
        height: 25px;
    }

    .content >>> .van-hairline--top-bottom::after {
        border: 0;
    }

    .title {
        width: 100%;
        padding: 0.625rem 0.9375rem;
        font-size: 12px;
    }

    .content >>> .van-grid-item__content::after {
        border-right: 0;
    }

    .content-div {
        padding: 0 15px 15px 15px;
    }

    .content-bottom {
        border-bottom: 1px solid #000000;
    }
</style>
